<template>
  <div>
    <div>语法说明</div>
    <codemirror v-model="sqlCode" :options="sqlOptions" />
    <div style="margin-buttom:10px,margin-top:10px">
      语法示例
      <span style="color:red">动态参数需要用引号括起来</span>
    </div>
    <codemirror v-model="xmlCode" :options="xmlOptions" />
  </div>
</template>
<script>
import { codemirror } from "vue-codemirror";
import "codemirror/mode/xml/xml.js";
export default {
  components: {
    codemirror,
  },
  data() {
    return {
      sqlOptions: {
        readOnly: true,
        tabSize: 4,
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        mode: "text/x-mysql",
        theme: "solarized light",
      },
      xmlOptions: {
        readOnly: true,
        tabSize: 4,
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        mode: "application/xml",
        theme: "solarized light",
      },
      sqlCode: "",
      xmlCode: "",
    };
  },
  mounted: function () {
    this.sqlCode =
    "\n" +
                    "    语法规则\n" +
                    "\n" +
                    "    [] 代表可选\n" +
                    "    支持 * 字段解析\n" +
                    "\n" +
                    "    ```\n" +
                    "    select\n" +
                    "    mapper接口方法名(type:接收数据的全限定类名,fetch:返回对象还是集合可选list或obj){\n" +
                    "      表别名.字段名[:字段别名和sql里as一致] [数据类型同java里类型一致],\n" +
                    "      ...\n" +
                    "      字段名.config(type:接收数据的全限定类名,fetch:返回对象还是集合可选list或obj){\n" +
                    "        表别名.字段名[:字段别名和sql里as一致] [数据类型同java里类型一致],\n" +
                    "        ...\n" +
                    "      }\n" +
                    "    }\n" +
                    "\n" +
                    "    from（表或子查询 join 表或子查询 同sql语法）\n" +
                    "    ```\n" +
                    "\n" +
                    "    > * 需要连接数据库，数据库里必须有对应的表\n" +
                    "\n"

                    this.xmlCode=
                    "        select\n" +
                    "        findByRootIdOrClassId(type:\"vip.youngboy.mplus.TplClass\") {\n" +
                    "          b.*\n" +
                    "          c.rootId,\n" +
                    "          components.config(type:\"vip.youngboy.mplus.TemplateModuleInfo\",fetch:\"list\"){\n" +
                    "            a.id:c_id,\n" +
                    "            a.component:component String,\n" +
                    "            a.name String,\n" +
                    "            a.page_type:pageType String,\n" +
                    "            a.thumbnail String,\n" +
                    "            a.range_index:rangeIndex Integer\n" +
                    "          }\n" +
                    "        }\n" +
                    "        from\n" +
                    "        \ttpl_class_info b\n" +
                    "            JOIN tpl_class_rel c ON b.id = c.classId\n" +
                    "            JOIN template_module_info a ON a.id = c.modId"
  },
  methods: {},
};
</script>
